<template>
  <div
    class="nav-box"
    :style="{'height':flag?'70px':'150px'}"
    @mouseover="navBoxDown"
    @mouseleave="navBoxUp"
  >
    <a :href="nav.path" v-for="nav in navs" :key="nav.path">{{nav.title}}</a>
    <i :class="flag?'nav-control-down':'nav-control-up'" />
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  flag: boolean = true;

  get navs() {
    return this.$store.state.homeModule.navs;
  }
  navBoxDown() {
    this.flag = false;
  }
  navBoxUp() {
    this.flag = true;
  }
}
</script>

<style lang='less' scoped>
.nav-box {
  .wh(1170px, auto);
  .flex-box(row, flex-start, center, wrap);
  margin-top: 10px;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  transition: 0.3s ease-in-out;

  .nav-control-down {
    .wh(32px, 12px);
    position: absolute;
    bottom: 0;
    left: calc(50% - 16px);
    background: url("~@/assets/images/down.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
  .nav-control-up {
    .wh(32px, 12px);
    position: absolute;
    bottom: 0;
    left: calc(50% - 16px);
    background: url("~@/assets/images/up.png");
    background-repeat: no-repeat;
    background-size: cover;
  }

  a {
    padding: 10px;
    color: #000;
    &:hover {
      color: #fc5531;
      text-decoration: none;
    }
  }
}
</style>